<template>
  <!--/Header-->
  <header id="site-header" class="fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light stroke py-lg-0">
        <h1>
          <NuxtLink class="navbar-brand" to="/">
            <span class="sub-color">Factor</span>ship
          </NuxtLink>
        </h1>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
          aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
          <span class="navbar-toggler-icon fa icon-close fa-times"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarScroll">
          <ul class="navbar-nav mx-lg-auto my-2 my-lg-0 navbar-nav-scroll">
            <li class="nav-item">
              <NuxtLink class="nav-link active" aria-current="page" to="/">Home</NuxtLink>
            </li>
            <li class="nav-item">
              <NuxtLink class="nav-link" to="/about">About</NuxtLink>
            </li>
            <li class="nav-item">
              <NuxtLink class="nav-link" to="/services">Services</NuxtLink>
            </li>
            <li class="nav-item dropdown">
              <NuxtLink class="nav-link dropdown-toggle" to="/" id="navbarDropdown" role="button"
                data-bs-toggle="dropdown" aria-expanded="false">
                Pages
                <span class="fa fa-angle-down ms-1"></span>
              </NuxtLink>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li>
                  <NuxtLink class="dropdown-item pt-2" to="/blog">Blog Page</NuxtLink>
                </li>
                <li>
                  <NuxtLink class="dropdown-item" to="/blog-single">Blog Single</NuxtLink>
                </li>
                <li>
                  <NuxtLink class="dropdown-item" to="/email">Email Page</NuxtLink>
                </li>
                <li>
                  <NuxtLink class="dropdown-item" to="/elements">Elements</NuxtLink>
                </li>
                <li>
                  <NuxtLink class="dropdown-item" to="/landing">Landing Page</NuxtLink>
                </li>
                <li>
                  <NuxtLink class="dropdown-item" to="/error">Error Page</NuxtLink>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <NuxtLink class="nav-link" to="/contact">Contact</NuxtLink>
            </li>
          </ul>
          <!--/search-->
          <button id="trigger-overlay" class="searchw3-icon me-xl-4 me-lg-3" type="button">
            <i class="fas fa-search"></i>
          </button>
          <!-- open/close -->
          <div class="overlay overlay-slidedown">
            <button type="button" class="overlay-close"><i class="fas fa-times"></i></button>
            <nav class="w3l-formhny">
              <form action="#" method="GET" class="d-sm-flex search-header">
                <input class="form-control me-2" type="search" placeholder="Search here..." aria-label="Search"
                  required>
                <button class="btn btn-style btn-secondary me-lg-3" type="submit">Search</button>
              </form>
            </nav>
          </div>
          <!--//search-->
        </div>
        <!-- toggle switch for light and dark theme -->
        <div class="mobile-position">
          <nav class="navigation">
            <div class="theme-switch-wrapper">
              <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox">
                <div class="mode-container">
                  <i class="gg-sun"></i>
                  <i class="gg-moon"></i>
                </div>
              </label>
            </div>
          </nav>
        </div>
        <!-- //toggle switch for light and dark theme -->
      </nav>
    </div>
  </header>
  <!--//Header-->
</template>

<script lang="ts" setup>

initHeader()

</script>

<style></style>